<template>
    <div ref="roseChart" class="chart-container"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import http from '../../http/index.js'
  
  export default {
    name: 'ClassroomGrade',
    props: {
      classroomId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        grades: [
          /*{ value: 80, name: 'Python数据分析' },
          { value: 78, name: '自然语言处理' },
          { value: 67, name: '图像处理' },
          { value: 90, name: '数据采集' },
          { value: 71, name: '大数据开发' },
          { value: 55, name: 'R语言数据分析' }*/
        ]
      };
    },
    methods: {
      initRoseChart() {
        const chartDom = this.$refs.roseChart;
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '课程均分',
            left: 'center',
            textStyle: {
              color: '#333',
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left',
          //   textStyle: {
          //     color: '#666'
          //   }
          // },
          series: [
            {
              name: '课程均分',
              type: 'pie',
              radius: [20, '50%'],
              center: ['50%', '50%'],
              roseType: 'radius',
              itemStyle: {
                borderRadius: 5
              },
              data: this.grades,
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200 + idx * 100;
              },
              color: ['#FFADAD', '#FFD6A5', '#FDFFB6', '#CAFFBF', '#9BF6FF', '#A0C4FF']
            }
          ]
        };
        myChart.setOption(option);
      },
      fetchGrades() {
      //从后端通过班级ID获取各门课程的考试分数
       http({
         method: 'get',
         url: '/api/classroom/grade',
         params: {
          classroomId: this.classroomId
         }
       }).then(res => {
       if (res) {
         this.grades = [];
         for (let data in res) {
           this.grades.push({
             name: data,
             value: res[data].classAvg
           })
         }
         console.log(this.grades);
         this.initRoseChart();
       }
       }).catch(error => {
          console.error(error);
       });
      }
    },
    mounted() {
      this.fetchGrades();
    }
  };
  </script>
  
  <style scoped>
  .chart-container {
    width: 600px;
    height: 400px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin: 20px auto;
    padding: 15px;
    background-color: #fff;
  }
  
  body, html {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    background-color: #f4f4f4;
    color: #333;
  }
  </style>